<template>
  <div>
    <el-card class="box-card" style="height: 75vh; margin: 0 20px 0 13px">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; font-size: large">修改部门</span>
      </div>
      <el-form
        ref="putDeptRef"
        :model="form"
        label-width="80px"
        :rules="rules"
        :inline="true"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="上级部门"
              prop="parentId"
              v-if="form.parentId !== 0"
            >
              <div style="width: 160px">
                <treeselect
                  v-model="form.parentId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="选择上级部门"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div
      style="
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        align-items: center;
      "
    >
      <div style="margin-left: auto; margin-right: 10px">
        <el-button style="height: 40px" @click="Cancel()">取消</el-button>
        <el-button style="height: 40px" type="primary" @click="submitForm()"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { listDept, updateDept, getDept } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  data() {
    return {
      msg: "测试数据",
      // 部门树选项
      deptOptions: [],
      form: {
        deptName: "",
        orderNum: 3,
        parentId: "",
      },
      rules: {
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        parentId: [
          { required: true, message: "上级部门不能为空", trigger: "blur" },
        ],
      },
    }; //这里存放数据
  },
  components: { Treeselect },
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    //取消方法
    Cancel() {
      this.$router.go(-1);
    },
    //初始化
    getDeptList() {
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
      getDept(this.$route.query.deptId).then((res) => {
        console.log(res);
        this.form = res.data;
      });
      //   console.log(this.form);
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    /**
     * 提交方法
     */
    submitForm() {
      console.log(this.form);
      this.$refs["putDeptRef"].validate((valid) => {
        updateDept(this.form).then((res) => {
          console.log(res);
          this.$modal.msgSuccess("修改成功");
          this.Cancel();
        });
      });
    },
  }, //方法集合
  created() {
    this.getDeptList();
  }, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
::v-deep .treeselect-main {
  width: 164px;

  .vue-treeselect__placeholder {
    line-height: 28px;
  }
  .vue-treeselect__control {
    height: 28px;
  }
}
</style>
